﻿@{
    
    Layout = null;
}
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/echarts.common.min.js"></script>
<script type="text/javascript">

    $(function () {
        $("#shopName").combobox({
            url: '/SupportNumShelf/GetShop',
            valueField: "shopID",
            textField: "shopName"
        });
    })
</script>


<script type="text/javascript">
    function searchData() {

        var start = $("#txtDate1").datebox('getValue');
        var end = $("#txtDate2").datebox('getValue');
        if (txtDate1.value > txtDate2.value) {

            alert("开始日期不能大于截至日期！");
            $("#txtDate2").datebox('setValue', "");//根据ID清空    

            txtDate1.focus();
            txtDate2.focus();
            return false;
        }
        else {
            $.post("/SaleAmountChart/GetEveryShop?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $('#shopName').val(),
            function (result) {
                var dataArray = [];
                var shopName = [];
                var SaleMoney = [];
                //
                //请求成功时执行该函数内容，result即为服务器返回的json对象  
                $.each(result, function (index, item) {

                    //挨个取出类别并填入类别数   
                    dataArray.push({
                        name: item.shopName,
                        value: item.SaleMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                    });
                    shopName.push(item.shopName);
                    SaleMoney.push(item.SaleMoney);
                });

                var myChart2 = echarts.init(document.getElementById('main2'));
                myChart2.setOption({
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        //left: '3%',
                        //right: '4%',
                        //bottom: '3%',
                        grid: {
                            y2: 140
                        },
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: shopName, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,//横轴信息全部显示  
                                rotate: -30,//-30度角倾斜显示  
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额统计',
                            type: 'bar',
                            barWidth: '60%',
                            data: dataArray //[10, 52, 200, 334, 390, 330, 220]
                        }
                    ]
                });
            })//之前的 


            $.post("/TotalSaleNumEchart/GetMoneyAll?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $('#shopName').val(),
           function (result) {
               var dataArray = [];
               var date = [];
               var SaleMoney = [];

               //请求成功时执行该函数内容，result即        为服务器返回的json对象   
               $.each(result, function (index, item) {

                   //挨个取出类别并填入类别数 
                   dataArray.push({
                       name: item.Date,
                       value: item.CountMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                   });
                   date.push(item.Date);
                   SaleMoney.push(item.CountMoney);
               });

               //date = date.reverse();
               //SaleMoney = SaleMoney.reverse();

               // 基于准备好的dom，初始化echarts实例   
               var myChart = echarts.init(document.getElementById('main'));
               var option = {
                   title: {
                       text: '总营业额走势情况统计'
                   },
                   tooltip: {
                       trigger: 'axis'
                   },
                   legend: {
                       data: ['使用次数']
                   },
                   toolbox: {
                       feature: {
                           saveAsImage: {}
                       }
                   },
                   grid: {
                       left: '3%',
                       right: '4%',
                       bottom: '3%',
                       containLabel: true
                   },
                   xAxis: {
                       type: 'category',
                       boundaryGap: false,
                       data: date//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                   },   // 
                   yAxis: {
                       type: 'value'
                   },
                   series: [{
                       name: '销售额',
                       type: 'line',
                       data: SaleMoney// [12, 12,34, 23, 25, 26, 78]
                   }]
               };
               myChart.setOption(option);
           }
             )



            $.post("/PerCustmPriceChart/PerCustomerPriceBySql?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $('#shopName').val(),
               function (result) {
                   var shopName = [];
                   var PerPrice = [];
                   var CustomerSum = [];
                   var Date = [];
                   //请求成功时执行该函数内容，result即为服务器返回的json对象

                   $.each(result, function (index, item) {
                       //挨个取出类别并填入类别数 shopName PerPrice
                       shopName.push(item.shopName);
                       PerPrice.push(item.PerPrice);
                       CustomerSum.push(item.CustomerSum);
                       Date.push(item.Date);

                   });

                   //Date = Date.reverse();
                   //CustomerSum = CustomerSum.reverse();
                   //PerPrice = PerPrice.reverse();
                   var colors = ['#5793f3', '#d14a61', '#675bba'];
                   option = {
                       color: colors,
                       title: {
                           text: '客单价/客单量分析',
                           //subtext: '按日期统计'
                       },
                       tooltip: {
                           trigger: 'axis'
                       },
                       legend: {
                           data: ['客单价', '客单量']
                       },
                       toolbox: {
                           show: true,
                           feature: {
                               mark: { show: true },
                               dataView: { show: true, readOnly: false },
                               magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                               restore: { show: true },
                               saveAsImage: { show: true }
                           }
                       },
                       calculable: true,
                       xAxis: [
                           {
                               type: 'category',
                               boundaryGap: false,
                               data: Date,//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                           }
                       ],
                       yAxis: [
                        //{
                        //    type: 'value'  ///Y 轴上的数据    自动的 不用设置  
                        //}
                         {
                             type: 'value',
                             name: '客单价',
                             min: 0,
                            // max: 10,
                             position: 'right',
                             axisLine: {
                                 lineStyle: {
                                     color: colors[0]
                                 }
                             },
                         },
                        {
                            type: 'value',
                            name: '客单量',
                            min: 0,
                           // max: 300,
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                        }
                       ],
                       series: [
                           {
                               name: '客单价',
                               type: 'line',
                               // stack: '总量',
                               data: PerPrice
                           },
                           {
                               name: '客单量',
                               type: 'line',
                               yAxisIndex: 1,
                               //stack: '总量',
                               data: CustomerSum
                           }
                       ]
                   };

                   var myChart = echarts.init(document.getElementById('main3'));
                   myChart.setOption(option);

               }
           )
            $.post("/AvgMoneyRateChart/RateChart?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $('#shopName').val(),
           function (result) {
               //alert(result);
               var Date = [];
               var AvgRate = [];
               var AllRate = [];
               //请求成功时执行该函数内容，result即为服务器返回的json对象
               $.each(result, function (index, item) {
                   //挨个取出类别并填入类别数 shopName PerPrice  
                   Date.push(item.Date);
                   AvgRate.push(item.AvgRate);
                   AllRate.push(item.AllRate);
               });

               var colors = ['#5793f3', '#d14a61', '#675bba'];
               option = {
                   color: colors,
                   //backgroundColor: '#eee',
                   legend: {
                       data: ['总利润', '平均利润', ],
                   },
                   title: {
                       text: '总利润/平均利润',
                       //subtext: '按日期统计'
                   },
                   tooltip: {
                       trigger: 'axis',
                       axisPointer: {
                           type: 'cross'
                       }
                   },
                   grid: {
                       right: '20%'
                   },
                   toolbox: {
                       show: true,
                       feature: {
                           mark: { show: true },
                           dataView: { show: true, readOnly: false },
                           magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                           restore: { show: true },
                           saveAsImage: { show: true }
                       }
                   },
                   calculable: true,
                   xAxis: [
                       {
                           type: 'category',
                           axisTick: {
                               alignWithLabel: true
                           },
                           boundaryGap: false,
                           data: Date //['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//
                       }
                   ],
                   yAxis: [
                       //{
                       //    type: 'value'
                       //}

                         {
                             type: 'value',
                             name: '总利润',
                             min: 0,
                             //max: 500,
                             position: 'right',
                             axisLine: {
                                 lineStyle: {
                                     color: colors[0]
                                 }
                             },
                         },
                         {
                             type: 'value',
                             name: '平均利润',
                             min: 0,
                            // max: 150,
                             position: 'left',
                             axisLine: {
                                 lineStyle: {
                                     color: colors[1]
                                 }
                             },
                         }
                   ],
                   series: [
                              {
                                  name: '总利润',
                                  type: 'line',
                                  barWidth: '20%',
                                  //yAxisIndex:1,
                                  data: AllRate
                              },
                              {
                                  name: '平均利润',
                                  barWidth: '20%',
                                  type: 'line',
                                  yAxisIndex: 1,
                                  data: AvgRate
                              },
                   ]
               };
               var myChart = echarts.init(document.getElementById('main4'));
               myChart.setOption(option);

           })

            //$("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            //$("#txtDate2").datebox('setValue', "");//根据ID清空
        }
    }
</script>



<body class="" style="width: 100%; height: 100%">

    <div id="tool" style="padding-left: 100px; margin-top: 20px">
        <p><span style="font-size: larger; color: brown; margin-top: initial;">请选择起始日期进行统计:</span></p>
        <input id="txtDate1" type="text" class="easyui-datebox" />
        ---
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp
        选择店铺： 
        <input id="shopName" class="easyui-combobox" name="shopName" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                  <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <span style="font-size: larger; color: red">注：所有图表默认情况下是近一周的统计对比情况 &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
    </div>
    <div data-options="region:'center'">

        <div style="width: 600px; height: 350px; margin-left: 100px; margin-top: 20px; float: left" id="main">
        </div>
        <div style="width: 600px; height: 450px; margin-top: 20px; margin-left: 100px; float: left" id="main2">
        </div>
        <div style="width: 600px; height: 450px; margin-left: 100px; margin-top: 20px; float: left" id="main3">
        </div>
        <div style="width:600px; height:450px; margin-top: 20px; margin-left: 100px; float: left" id="main4">
        </div>


    </div>
    <script type="text/javascript">
        $.post('/SaleAmountChart/GetEveryShop',
          function (result) {
              var dataArray = [];
              var shopName = [];
              var SaleMoney = [];

              //请求成功时执行该函数内容，result即为服务器返回的json对象  data-options="region:'center'" data-options="region:'center'"  
              $.each(result, function (index, item) {

                  //挨个取出类别并填入类别数 
                  dataArray.push({
                      name: item.shopName,
                      value: item.SaleMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                  });
                  shopName.push(item.shopName);
                  SaleMoney.push(item.SaleMoney);
              });
 
              var myChart2 = echarts.init(document.getElementById('main2'));

              myChart2.setOption( {
                  color: ['#3398DB'],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      //left: '3%',
                      //right: '4%',
                      //bottom: '3%',
                      grid: {
                          y2: 140
                      },
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: shopName, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                          axisTick: {
                              alignWithLabel: true
                          },
                          axisLabel: {
                              interval: 0,//横轴信息全部显示  
                              rotate: -30,//-30度角倾斜显示  
                          },
                      }
                  ],    
                  yAxis: [
                      {
                          type: 'value'
                      }
                  ],
                  series: [
                      {
                          name: '销售额统计',
                          type: 'bar',
                          barWidth: '60%',
                          data: dataArray //[10, 52, 200, 334, 390, 330, 220]
                      }
                  ]
              });
          
              //myChart2.setOption({
              //    color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
              //    title: {
              //        text: '各店铺销售额比例统计',
              //        subtext: '饼状图',
              //        left: 'center'
              //    },
              //    tooltip: {
              //        trigger: 'item',
              //        formatter: "{a} <br/>{b} : {c} 元({d}%)"
              //    },
              //    legend: {
              //        bottom: 10,
              //        left: 'center',
              //        data: shopName,   //提示工具  要显示的图标
              //    },
              //    series: [
              //        {
              //            name: '销售额比例统计',
              //            type: 'pie',
              //            radius: '65%',
              //            center: ['50%', '50%'],
              //            selectedMode: 'single',
              //            data: dataArray,
              //        }
              //    ],
              //    itemStyle: {
              //        emphasis: {
              //            shadowBlur: 10,
              //            shadowOffsetX: 0,
              //            shadowColor: 'rgba(0, 0, 0, 0.5)'
              //        }
              //    }
              //});

              $.post('/PerCustmPriceChart/PerCustomerPriceBySql',
               function (result) {
                   var shopName = [];
                   var PerPrice = [];
                   var CustomerSum = [];
                   var Date = [];
                   //请求成功时执行该函数内容，result即为服务器返回的json对象

                   $.each(result, function (index, item) {
                       //挨个取出类别并填入类别数 shopName PerPrice
                       //shopName.push(item.shopName);
                       PerPrice.push(item.PerPrice);
                       CustomerSum.push(item.CustomerSum);
                       Date.push(item.Date);

                   });

                   var colors = ['#5793f3', '#d14a61', '#675bba'];
                   option = {
                       color: colors,
                       title: {
                           text: '客单价/客单量分析',
                           //subtext: '按日期统计'
                       },
                       tooltip: {
                           trigger: 'axis'
                       },
                       legend: {
                           data: ['客单价', '客单量']
                       },
                       toolbox: {
                           show: true,
                           feature: {
                               mark: { show: true },
                               dataView: { show: true, readOnly: false },
                               magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                               restore: { show: true },
                               saveAsImage: { show: true }
                           }
                       },
                       calculable: true,
                       xAxis: [
                           {
                               type: 'category',
                               boundaryGap: false,
                               data: Date,//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                           }
                       ],
                       yAxis: [
                        //{
                        //    type: 'value'  ///Y 轴上的数据    自动的 不用设置  
                        //}
                         {
                             type: 'value',
                             name: '客单价',
                             min: 0,
                            // max: 10,
                             position: 'right',
                             axisLine: {
                                 lineStyle: {
                                     color: colors[0]
                                 }
                             },
                         },
                        {
                            type: 'value',
                            name: '客单量',
                            min: 0,
                            //max: 800,
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                        }
                       ],
                       series: [
                           {
                               name: '客单价',
                               type: 'line',
                               // stack: '总量',
                               data: PerPrice
                           },
                           {
                               name: '客单量',
                               type: 'line',
                               yAxisIndex: 1,
                               //stack: '总量',
                               data: CustomerSum
                           }
                       ]
                   };

                   var myChart = echarts.init(document.getElementById('main3'));
                   myChart.setOption(option);

               }
               )
              $.post("/TotalSaleNumEchart/GetMoneyAll?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val(),
                function (result) {
                    var dataArray = []; 
                    var date = [];
                    var SaleMoney = [];


                    //请求成功时执行该函数内容，result即        为服务器返回的json对象   
                    $.each(result, function (index, item) {

                        //挨个取出类别并填入类别数 
                        dataArray.push({
                            name: item.Date,
                            value: item.CountMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                        });
                        date.push(item.Date);
                        SaleMoney.push(item.CountMoney);
                    });
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    var option = {
                        title: {
                            text: '总营业额走势情况统计'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['使用次数']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '销售额',
                            type: 'line',
                            data: SaleMoney// [12, 12,34, 23, 25, 26, 78]
                        }]
                    };
                    myChart.setOption(option);
                }
                  )

              $.post('/AvgMoneyRateChart/RateChart',
     function (result) {
         //alert(result);
         var Date = [];
         var AvgRate = [];
         var AllRate = [];
         //请求成功时执行该函数内容，result即为服务器返回的json对象
         $.each(result, function (index, item) {
             //挨个取出类别并填入类别数 shopName PerPrice
             Date.push(item.Date);
             AvgRate.push(item.AvgRate);
             AllRate.push(item.AllRate);
         });
         Date = Date.reverse();
         AvgRate = AvgRate.reverse();
         AllRate = AllRate.reverse();
         var colors = ['#5793f3', '#d14a61', '#675bba'];
         option = {
             color: colors,
            // backgroundColor: '#eee',
             legend: {
                 data: ['总利润', '平均利润', ],
             },
             title: {
                 text: '总利润/平均利润',
                 //subtext: '按日期统计'
             },
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'cross'
                 }
             },
             grid: {
                 right: '20%'
             },
             toolbox: {
                 show: true,
                 feature: {
                     mark: { show: true },
                     dataView: { show: true, readOnly: false },
                     magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                     restore: { show: true },
                     saveAsImage: { show: true }
                 }
             },
             calculable: true,
             xAxis: [
                 {
                     type: 'category',
                     axisTick: {
                         alignWithLabel: true
                     },
                     boundaryGap: false,
                     data: Date //['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//
                 }
             ],
             yAxis: [
                 //{
                 //    type: 'value'
                 //}

                   {
                       type: 'value',
                       name: '总利润',
                       min: 0,
                      // max: 500,
                       position: 'right',
                       axisLine: {
                           lineStyle: {
                               color: colors[0]
                           }
                       },
                   },
                   {
                       type: 'value',
                       name: '平均利润',
                       min: 0,
                      // max: 150,
                       position: 'left',
                       axisLine: {
                           lineStyle: {
                               color: colors[1]
                           }
                       },
                   }
             ],
             series: [
                        {
                            name: '总利润',
                            type: 'line',
                            barWidth: '20%',
                            //yAxisIndex:1,
                            data: AllRate
                        },
                        {
                            name: '平均利润',
                            barWidth: '20%',
                            type: 'line',
                            yAxisIndex: 1,
                            data: AvgRate
                        },
             ]
         };
         var myChart = echarts.init(document.getElementById('main4'));
         myChart.setOption(option);

     })


          })
    </script>

</body>

